import React, { useState } from 'react';
import { Table, Button, Input, DatePicker } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import './wareHouse.less';

interface DataType {
  key: number;
  name: string;
  type: '出库' | '入库';
  date: string;
  quantity: number;
  price: number;
  operator: string;
}

export default function EmergencyExercise() {
  const [searchParams, setSearchParams] = useState({
    name: '',
    type: '',
    date: '',
  });

  const columns: ColumnsType<DataType> = [
    {
      title: '序号',
      dataIndex: 'key',
      width: 80,
    },
    {
      title: '物资名称',
      dataIndex: 'name',
      width: 200,
    },
    {
      title: '出入库类别',
      dataIndex: 'type',
      width: 120,
    },
    {
      title: '出入库日期',
      dataIndex: 'date',
      width: 120,
    },
    {
      title: '出入库数量',
      dataIndex: 'quantity',
      width: 120,
    },
    {
      title: '金额（元）',
      dataIndex: 'price',
      width: 120,
    },
    {
      title: '出入库人员',
      dataIndex: 'operator',
      width: 120,
    },
    {
      title: '操作',
      render: () => (
        <>
          <Button type="link">查看</Button>
          <Button type="link" danger>删除</Button>
        </>
      ),
      width: 150,
    },
  ];

  const data: DataType[] = [
    {
      key: 1,
      name: '220v指示灯（白）',
      type: '出库',
      date: '2022-05-01',
      quantity: 20,
      price: 20.00,
      operator: '张某1',
    },
    {
      key: 2,
      name: '220v指示灯（黄）',
      type: '出库',
      date: '2022-05-01',
      quantity: 20,
      price: 25.00,
      operator: '张某1',
    },
    {
      key: 3,
      name: '220v指示灯（绿）',
      type: '入库',
      date: '2022-05-01',
      quantity: 20,
      price: 18.00,
      operator: '张某1',
    },
    {
      key: 4,
      name: '220v指示灯（黄）',
      type: '入库',
      date: '2022-05-01',
      quantity: 20,
      price: 20.00,
      operator: '张某1',
    },
  ];

  return (
    <div className="emergency-exercise">
      <div className="search-bar">
        <Input 
          placeholder="物资名称" 
          style={{ width: 200, marginRight: 16 }}
          value={searchParams.name}
          onChange={e => setSearchParams(prev => ({ ...prev, name: e.target.value }))}
        />
        <Input 
          placeholder="出入库类别" 
          style={{ width: 200, marginRight: 16 }}
          value={searchParams.type}
          onChange={e => setSearchParams(prev => ({ ...prev, type: e.target.value }))}
        />
        <Input 
          placeholder="查找" 
          style={{ width: 200, marginRight: 16 }}
          value={searchParams.date}
          onChange={e => setSearchParams(prev => ({ ...prev, date: e.target.value }))}
        />
        <Button type="primary">查询</Button>
        <Button style={{ marginLeft: 8 }}>重置</Button>
        <div style={{ float: 'right' }}>
          <Button type="primary">导出</Button>
          <Button type="primary" style={{ marginLeft: 8 }}>新增出入库</Button>
        </div>
      </div>
      <Table 
        columns={columns} 
        dataSource={data}
        pagination={{
          total: 50,
          current: 1,
          pageSize: 10,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `共 ${total} 条`,
        }}
      />
    </div>
  );
}